import React from 'react'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
import { ListItem } from './listItem'
import { SelectedMtModel } from '../../../translator'
import { useSelectedStore } from '../store'

interface RowRendererProps extends ListChildComponentProps {
	data: SelectedMtModel[]
}
const rowRenderer = React.memo(({ data: list, index, style }: RowRendererProps) => {
	const rowData = list[index]
	return (
		<div style={style}>
			<ListItem data={rowData} />
		</div>
	)
})

function SelectedList() {
	const selectedList = useSelectedStore((state) => state.selectedList)
	return (
		<AutoSizer>
			{({ width, height }) => {
				return (
					<List
						width={width}
						height={height}
						itemCount={selectedList.length}
						itemSize={38}
						itemData={selectedList}
						itemKey={(index, data) => selectedList[index].id}
					>
						{rowRenderer}
					</List>
				)
			}}
		</AutoSizer>
	)
}
export default SelectedList
